<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>分析VueComponent</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			分析Vue和VueComponent：
						1.Weather组件的本质是构造函数。

						2.Weather确实是构造函数，但不是程序员亲自定义的构造函数，是Vue.extend生成的。

						3.我们以后只需要去写<Weather/>，Vue底层代码就会帮我们执行new Weather(options)

						4.Vue.extend调用的返回值是VueComponent构造函数，所以new Weather其实就是在new VueComponent

						5.每次调用Vue.extend，都是返回一个全新的VueComponent！！！！。

						6.所谓的组件实例对象，其实都是VueComponent的实例，以后均简称vc，Vue的实例对象，以后均简称vm。

						7.创建组件时，配置中的：data函数、methods中的方法、watch中的函数、computed中的函数 的 this均是vc
							创建vm时，配置中的：data函数、methods中的方法、watch中的函数、computed中的函数 的 this均是vm
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<Weather/>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		//定义一个Weather组件
		const Weather = Vue.extend({
			template:`
				<div>
					<h2>今天天气很{{isHot ? '炎热' : '凉爽'}}</h2>
					<button @click="changeWeather">切换天气</button>
				</div>
			`,
			data(){
				console.log('Weather组件中的data函数中的this是:',this)
				return {
					isHot:true
				}
			},
			methods: {
				changeWeather(){
					console.log('Weather组件中methods中的方法的this是:',this)
					this.isHot = !this.isHot
				}
			},
			watch:{
				isHot(){
					console.log('Weather组件中watch中的方法的this是:',this)
				}
			}
		})
		const Person = Vue.extend({
			template:'<h1>我是人</h1>'
		})
		
		// Weather.prototype.test = ()=>{alert(1)}
		// const w1 = new Weather()
		// const p1 = new Person()
		// console.log('&&&&',w1)
		// console.log('#####',p1)

		//创建一个vm
		const vm = new Vue({
			el:'#root',
			components:{Weather} //注册组件
		})
		// console.log(vm)
	</script>
</html>